<template>
  <!-- 左侧菜单栏 -->
  <el-menu :default-active="activeMenu" class="el-menu-vertical-demo" @select="handleSelect" router>
    <!-- 挂号收费 -->
    <el-menu-item index="/charge">
      <i class="el-icon-s-order"></i>
      <span>挂号收费</span>
    </el-menu-item>
    <!-- 用户管理 -->
    <el-menu-item index="/user-manage">
      <i class="el-icon-user"></i>
      <span>用户管理</span>
    </el-menu-item>
    <!-- 电子就诊卡 -->
    <el-menu-item index="/ecard">
      <i class="el-icon-s-cooperation"></i>
      <span>电子就诊卡</span>
    </el-menu-item>
    <!-- 现场挂号 -->
    <el-menu-item index="/onsite">
      <i class="el-icon-s-claim"></i>
      <span>现场挂号</span>
    </el-menu-item>
    <!-- 退号 -->
    <el-menu-item index="/retire">
      <i class="el-icon-remove-outline"></i>
      <span>退号</span>
    </el-menu-item>
    <!-- 医生排班 -->
    <el-menu-item index="/doctor-schedule">
      <i class="el-icon-s-custom"></i>
      <span>医生排班</span>
    </el-menu-item>
    <!-- 系统公告 -->
    <el-menu-item index="/notice">
      <i class="el-icon-message"></i>
      <span>系统公告</span>
    </el-menu-item>
    <!-- 患者结算 -->
    <el-menu-item index="/settle">
      <i class="el-icon-coin"></i>
      <span>患者结算</span>
    </el-menu-item>
    <!-- 退出登录 -->
    <el-menu-item index="/login">
      <i class="el-icon-switch-button"></i>
      <span>退出</span>
    </el-menu-item>
  </el-menu>
</template>

<script setup>
import { ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'

// 当前激活菜单项
const route = useRoute()
const router = useRouter()
const activeMenu = ref(route.path)

// 监听路由变化，保持菜单高亮
watch(() => route.path, (val) => {
  activeMenu.value = val
})

// 菜单点击切换路由
function handleSelect(index) {
  // 如果点击的是退出登录
  if (index === '/login') {
    // 清除登录状态
    localStorage.removeItem('isLogin')
  }
  router.push(index)
}
</script>

<style scoped>
.el-menu-vertical-demo {
  min-height: 100vh;
  border-right: none;
}
</style>